<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript语法编写位置</title>
    <!-- 
    语法编写位置说明与总结:
    1. 全局作用域
    - 定义：在任何函数或块外部声明的变量和函数，属于全局作用域。
        var globalVar = "这是全局变量";
        function globalFunction() {
          console.log(globalVar);
        }
      - 全局变量可以在任何地方访问，可能导致命名冲突。

    2. 函数作用域
    - 定义：在函数内部声明的变量和函数，属于函数作用域。
        function myFunction() {
          var localVar = "这是局部变量";
          console.log(localVar);
        }
        myFunction(); // 输出: 这是局部变量
        // console.log(localVar); // 报错: localVar is not defined
      - 局部变量只能在函数内部访问，防止全局命名冲突。

    3. 块级作用域
    - 定义：使用  `let`  和  `const`  声明的变量具有块级作用域，只在其所在的代码块内有效。
        if (true) {
          let blockVar = "这是块级变量";
          console.log(blockVar); // 输出: 这是块级变量
        }
        // console.log(blockVar); // 报错: blockVar is not defined
      - 块级作用域可以有效管理变量的生命周期，避免意外覆盖。

    4. 变量提升
    - 定义：在 JavaScript 中，使用  `var`  声明的变量会被提升到其所在函数或全局作用域的顶部，但赋值不会提升。
        console.log(hoistedVar); // 输出: undefined
        var hoistedVar = "这是提升的变量";
      - 理解变量提升有助于避免在使用变量之前访问未定义的错误。

    5. 函数声明与函数表达式
    - 函数声明：可以在代码的任何位置调用，因为它们在编译时被提升。
        function declaredFunction() {
          console.log("这是函数声明");
        }
        declaredFunction(); // 可以在声明之前调用
    - 函数表达式：仅在执行到该行时才能调用，因为它们不会被提升。
        // function expression
        const expressedFunction = function() {
            console.log("这是函数表达式");
        };
        // expressedFunction(); // 不能在声明之前调

    6. 编写在html内部
      <a href="#" onclick="alert('百度一下')">百度一下</a>
      <a href="javascript: alert('百度一下')">百度一下</a>

    7. 独立的js文件

    总结
    - 全局作用域：在任何地方都可以访问，需小心命名冲突。
    - 函数作用域：局部变量仅在函数内部有效，避免全局污染。
    - 块级作用域：使用  `let`  和  `const`  管理变量生命周期。
    - 变量提升：理解提升机制，避免未定义错误。
    - 函数声明与表达式*
  --></head>
  <body>
    <script>
      // 1. 全局作用域 - 全局变量可以在任何地方访问，可能导致命名冲突。
      var globalVar = "这是全局变量";
      function globalFunction() {
        console.log(globalVar);
      }

      // 2. 函数作用域 - 局部变量只能在函数内部访问，防止全局命名冲突。
      function myFunction() {
        var localVar = "这是局部变量";
        console.log(localVar);
      }
      myFunction(); // 输出: 这是局部变量
      // console.log(localVar); // 报错: localVar is not defined

      // 3. 块级作用域 - 块级作用域可以有效管理变量的生命周期，避免意外覆盖。
      if (true) {
        let blockVar = "这是块级变量";
        console.log(blockVar); // 输出: 这是块级变量
      }
      // console.log(blockVar); // 报错: blockVar is not defined

      // 4. 变量提升 - 理解变量提升有助于避免在使用变量之前访问未定义的错误。
      console.log("变量提升:", hoistedVar); // 输出: undefined
      var hoistedVar = "这是提升的变量";

      // 5. 函数声明与函数表达式 - 函数表达式：仅在执行到该行时才能调用，因为它们不会被提升。
      function declaredFunction() {
        console.log("这是函数声明");
      }
      declaredFunction(); // 可以在声明之前调用

      // function expression
      const expressedFunction = function () {
        console.log("这是函数表达式");
      };
      // expressedFunction(); // 不能在声明之前调
    </script>
  </body>
</html>
